<template>
  <div class="main">
    <!-- 一楼 -->
    <div class="mainNavWrap">
      <div class="autoWidth">
        <router-link to="/">
          <img src="https://www.hzsp.com/images/logo.png" alt="" />
        </router-link>
        <span href="">440-523-9658</span>
      </div>
    </div>
    <!-- 二楼 -->
    <div class="twoLogin">
      <div class="towLoginCenter">
        <div class="denglu">
          <div class="logIn_box">
            <div class="head">
              <h2><span>使用手机号</span>直接登录</h2>
              <p>无需注册,登录即成会员</p>
            </div>
            <!-- 第二部分 登录 验证码 -->
            <div class="form">
              <div class="mobile">
                <input
                  class="required"
                  type="text"
                  placeholder="填写手机号码"
                  maxlength="11"
                  id="_mobile"
                />
                <div class="yanZheng">
                  <input
                    class="required"
                    type="text"
                    placeholder="输入验证码"
                    maxlength="4"
                    id=""
                  />
                  <button class="reqbtn">获取验证码</button>
                </div>
              </div>

              <div class="code">
                <div class="logInBtn" id="logIn"><a href="">登录</a></div>

                <div class="end">
                  <!-- 单选框 -->
                  <input type="checkbox" />
                  <span
                    >已阅读并同意
                    <a href="" class="policy"> 《会员服务协议及隐私政策》 </a>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
}

.main {
  overflow-x: hidden;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-image: url(https://www.hzsp.com/images/p2Bg.jpg);

  .mainNavWrap {
    height: 103px;
  }

  .autoWidth {
    margin: 0 auto;
    width: 1200px;
    display: flex;
    justify-content: space-between;

    a {
      margin: 10px;
    }

    span {
      font-size: 20px;
      line-height: 5;
    }
  }

  .twoLogin {
    height: 90vh;
    background-size: unset;
    // background: no-repeat;
    .towLoginCenter {
      background: url(https://www.hzsp.com/booking/images/logIn_bg.jpg)
        no-repeat;
      background-position: top;
      width: 100vw;
      height: 50vh;
      margin: 0 auto;
      // display: flex;
      // justify-content: center;
      .denglu {
        position: relative;
        height: 20vh;
      }
      .logIn_box {
        position: absolute;
        right: 20vw;

        border-radius: 10px;
        background: #fff;
        padding: 30px 44px;

        .form {
          width: 309px;
          margin: 0 auto;

          .mobile {
            .required {
              // margin: 20px;
              width: 304px;
              height: 44px;
              border-radius: 10px;
              padding: 1px 2px;
              border: 1px solid #d4d4d4;
              color: #959595;
              font-size: 14px;
              text-indent: 18px;
              box-sizing: border-box;
            }

            .yanZheng {
              margin-top: 20px;
              justify-content: space-between;
              display: flex;

              input {
                // margin: 20px;
                width: 200px;
                height: 44px;
                border-radius: 10px;
                padding: 1px 2px;
                border: 1px solid #d4d4d4;
                color: #959595;
                font-size: 14px;
                text-indent: 18px;
                box-sizing: border-box;
              }

              .reqbtn {
                // display: inline-block;
                width: 92px;
                height: 44px;
                line-height: 44px;
                border-radius: 10px;
                outline: none;
                border: 1px solid #33c88e;
                color: #33c88e;
                font-size: 14px;
                margin-left: 6px;
                vertical-align: top;
                text-align: center;
                box-sizing: border-box;
                box-sizing: border-box;
                background: #fff;
              }
            }
          }

          .code {
            width: 100%;
            margin: 0 auto;

            #logIn {
              height: 42px;
              line-height: 40px;
              text-align: center;
              font-size: 18px;
              color: #fff;
              background: #ff8a00;
              border-radius: 10px;
              margin: 18px 0;
            }
          }
        }

        .head {
          h2,
          p {
            margin: 10px;
            display: flex;
            justify-content: center;
          }

          p {
            font-size: 14px;
          }
        }

        .head {
          h2 {
            font-size: 18px;

            span {
              color: #ff8a00;
            }
          }
        }
      }
    }
  }
}
</style>